<!--
 * @Author: liuhanzhuang
 * @Date: 2023-01-11 13:47:18
 * @Description: 文件描述
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 800px;
      height: 500px;
      border: 2px solid #000;

      background: linear-gradient(100deg,
          rgba(255, 255, 255, 0) 45%,
          rgba(255, 255, 255, .4) 50%,
          rgba(255, 255, 255, 0)55%) no-repeat rgb(228, 225, 225);

      background-size: 200% 100%;
      background-position-x: 170%;
      animation: test 2s linear infinite;

    }

    @keyframes test {
      to {
        background-position-x: -30%;
      }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>